<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: #fff;
            font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
            color: #333;
            min-width: 1226px;
        }
        a {
            text-decoration: none;
        }
        .page-main {
            width: 100%;
            background: #f5f5f5;
            padding: 4px 0 10px;
        }
        .container {
            width: 1226px;
            margin: 0 auto;
        }
        .home-banner-box {
            margin: 22px auto;
        }
        .box-hd {
            display: flex;
            justify-content: space-between;
        }
        .box-bd>h2 {
            height: 58px;   
            line-height: 58px;
        }
        .box-hd>.more>a {
            display: block;
            color: #424242;
            line-height: 58px;
        }
        .box-bd {
            display: flex;
            justify-content: center;
        }
        .left-item {
            width: 234px;
            height: 614px;
            background: rgb(147, 225, 244);
        }
        .right-item {
            padding-left: 14px;
            width: 992px;
            background: #f5f5f5;
            display: grid;
            grid-template-columns: auto auto auto auto;
            grid-gap: 14px;
        }
        .item {
            width: 234px;
            height: 300px;
            background: #fff;
            box-sizing: border-box;
            padding: 20px 0px;
            text-align: center;
        }
        .item  .figure > img {
            width: 160px;
            height: 160px;
        }
        .item  .title {
            font-size: 14px;
            font-weight: 400;
            color: #333;
            margin: 0 10px 2px;
        } 
        .item  .desc {
            height: 18px;
            font-size: 12px;
            font-weight: 400;
            margin: 0 10px 10px;
            color: #b0b0b0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        } 
        .item  .price {
            font-size: 14px;
            font-weight: 400;
            color: #ff6700;
            margin: 0 10px 14px;
        } 
        .left-item:hover, .right-item>.item:hover {
            box-shadow: 1px 1px 8px 5px #e0e0e0;
            transform: translateY(-2px);
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
</head>
<body>
    <div id="app">
        <div class="page-main">
            <div class="container">
                <div class="home-banner-box">
                    <a href=""><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef461a313aac4fd0aae1e6f63a75138f.jpg?thumb=1&w=1226&h=120&f=webp&q=90" alt=""></a>
                </div>
                <div class="box">
                    <div class="box-hd">
                        <h2 class="title">手机</h2>
                        <div class="more">
                            <a href="">查看更多<i>&raquo;</i></a>
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="left-item">
                            <a :href="'https://www.mi.com/shop/buy/detail?product_id='+mobile.hd.id" target="_blank">
                                <img :src="mobile.hd.img" alt="">
                            </a>
                        </div>
                        <div class="right-item">
                            <div class="item" v-for="pro in mobile.bd" :key="pro.id">
                                <a :href="'https://www.mi.com/shop/buy/detail?product_id='+pro.id" target="_blank">
                                    <div class="figure">
                                        <img :src="pro.img" alt="">
                                    </div>
                                    <h3 class="title"> {{pro.name}}</h3>
                                    <p class="desc">{{pro.desc}}</p>
                                    <p class="price">
                                        <span class="num">{{pro.price}}</span>元<span>起</span>
                                    </p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
   
    <script>
        new Vue({
            el : "#app",
            data(){
                return {
                    mobile : {
                        hd : {
                            id : 18075,
                            img : "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d91bb6cf7da0947e8a6e50e03f4daf06.jpg?thumb=1&w=234&h=614&f=webp&q=90",
                        },
                        bd : [
                            {id:18119,name:"Redmi 12C",img:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212301043_9e2a889ac4d99a1bbf95aa2defda039a.png?thumb=1&w=200&h=200&f=webp&q=90", desc:"高性能长续航，5000万像素超清双摄，全新多彩配色",price:669},
                            {id:18075,name:"Redmi K60",img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a6cec580260ceb20ae6a885c2c65c611.png?thumb=1&w=200&h=200&f=webp&q=90", desc:"骁龙8+｜2K 高光直屏｜5500mAh+67W闪充",price:2499},
                            {id:18077,name:"Redmi K60 Pro",img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f37dd30477e7ba040c7fb69c31ad8bf3.png?thumb=1&w=200&h=200&f=webp&q=90", desc:"【第二代骁龙8】狂暴引擎",price:3299},
                            {id:18092,name:"Redmi Note 12 Pro 极速版",img:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202212251443_29b17941a7365948446bd193011d9241.png?thumb=1&w=200&h=200&f=webp&q=90", desc:"高通骁龙778G，OLED柔性直屏+一亿像素",price:1699},
                            {id:17972,name:"Xiaomi 13 限量定制色",img:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202211292351_92aba2c69123166a74ba2e2b525b1ae2.png?thumb=1&w=200&h=200&f=webp&q=90", desc:"全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头",price:4999},
                            {id:17969,name:"Xiaomi 13 Pro",img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aa047170a22d9f0852254aa36df5f5f0.png?thumb=1&w=200&h=200&f=webp&q=90", desc:"全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 2K 专业原色屏｜120W小米澎湃秒充 ｜徕卡75mm长焦镜头",price:4999},
                            {id:17971,name:"Xiaomi 13",img:"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/94c6497b70f2e881460cb232082a0da6.png?thumb=1&w=200&h=200&f=webp&q=90", desc:"全新第二代骁龙8｜徕卡专业光学镜头｜徕卡原生双画质 | 6.36″超窄边屏幕｜67W小米澎湃秒充｜徕卡75mm长焦镜头",price:3999},
                            {id:16642,name:"Redmi Note 12 5G",img:"https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202210262033_ef39fca0e37395d07682124770fd3ad9.png?thumb=1&w=200&h=200&f=webp&q=90", desc:"三星 OLED 护眼屏｜骁龙 5G 芯｜5000mAh 电量",price:1199},
                        ]
                    }
                }
            }
        })
    </script>
</body>
</html>